<template>
	<view class="register-container">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<!-- 注册表单 -->
		<view class="register-form">
			<view class="form-header">
				<text class="title">创建账户</text>
				<text class="subtitle">欢迎加入小何备忘录</text>
			</view>
			
			<view class="form-content">
				<view class="input-group">
					<u-input 
						v-model="form.username"
						placeholder="请输入用户名"
						prefix-icon="account"
						prefix-icon-style="color: #667eea"
						maxlength="20"
						border="surround"
						custom-style="background: #f8f9fa; border-radius: 12px;"
					></u-input>
				</view>
				
				<view class="input-group">
					<u-input 
						v-model="form.password"
						:type="showPassword ? 'text' : 'password'"
						placeholder="请输入密码"
						prefix-icon="lock"
						prefix-icon-style="color: #667eea"
						:suffix-icon="showPassword ? 'eye-off' : 'eye'"
						suffix-icon-style="color: #999"
						@suffix-icon-click="showPassword = !showPassword"
						maxlength="50"
						border="surround"
						custom-style="background: #f8f9fa; border-radius: 12px;"
					></u-input>
				</view>
				
				<view class="input-group">
					<u-input 
						v-model="form.confirmPassword"
						:type="showConfirmPassword ? 'text' : 'password'"
						placeholder="请确认密码"
						prefix-icon="lock"
						prefix-icon-style="color: #667eea"
						:suffix-icon="showConfirmPassword ? 'eye-off' : 'eye'"
						suffix-icon-style="color: #999"
						@suffix-icon-click="showConfirmPassword = !showConfirmPassword"
						maxlength="50"
						border="surround"
						custom-style="background: #f8f9fa; border-radius: 12px;"
					></u-input>
				</view>
				
				<view class="input-group">
					<u-input 
						v-model="form.phone"
						placeholder="请输入手机号"
						prefix-icon="phone"
						prefix-icon-style="color: #667eea"
						type="number"
						maxlength="11"
						border="surround"
						custom-style="background: #f8f9fa; border-radius: 12px;"
					></u-input>
				</view>
				
				<view class="input-group">
					<u-input 
						v-model="form.email"
						placeholder="请输入邮箱（可选）"
						prefix-icon="email"
						prefix-icon-style="color: #667eea"
						type="email"
						border="surround"
						custom-style="background: #f8f9fa; border-radius: 12px;"
					></u-input>
				</view>
				
				<view class="agreement">
					<u-checkbox v-model="agreeTerms" shape="circle" active-color="#667eea"></u-checkbox>
					<text class="agreement-text">我已阅读并同意</text>
					<text class="agreement-link" @click="showTerms">《用户协议》</text>
				</view>
				
				<button class="register-btn" @click="handleRegister">注册</button>
				
				<view class="form-footer">
					<text class="footer-text">已有账户？</text>
					<text class="footer-link" @click="goToLogin">立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
	data() {
		return {
			statusBarHeight: 0,
			showPassword: false,
			showConfirmPassword: false,
			agreeTerms: false,
			form: {
				username: '',
				password: '',
				confirmPassword: '',
				email: '',
				phone: ''
			}
		}
	},
	onLoad() {
		this.getStatusBarHeight()
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			if (statusBarHeight === 0) {
				statusBarHeight = 25;
			}
			statusBarHeight = Math.max(statusBarHeight, 22);
			// #endif
			
			// #ifdef MP-ALIPAY
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			statusBarHeight = 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		handleRegister() {
			// 表单验证
			if (!this.form.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				})
				return
			}
			
			if (this.form.username.length < 3) {
				uni.showToast({
					title: '用户名至少3个字符',
					icon: 'none'
				})
				return
			}
			
			if (!this.form.phone.trim()) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			
			// 手机号格式验证
			const phoneRegex = /^1[3-9]\d{9}$/
			if (!phoneRegex.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			if (!this.form.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return
			}
			
			if (this.form.password.length < 6) {
				uni.showToast({
					title: '密码至少6位',
					icon: 'none'
				})
				return
			}
			
			if (this.form.password !== this.form.confirmPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				})
				return
			}
			
			// 邮箱格式验证（如果填写了邮箱）
			if (this.form.email && this.form.email.trim()) {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
				if (!emailRegex.test(this.form.email)) {
					uni.showToast({
						title: '请输入正确的邮箱格式',
						icon: 'none'
					})
					return
				}
			}
			
			if (!this.agreeTerms) {
				uni.showToast({
					title: '请同意用户协议',
					icon: 'none'
				})
				return
			}
			
			// 注册用户
			try {
				const result = storage.register({
					username: this.form.username,
					name: this.form.username, // 使用用户名作为姓名
					phone: this.form.phone,
					password: this.form.password,
					email: this.form.email || ''
				})
				
				if (result.success) {
					// 直接跳转回登录页，避免toast卡住
					uni.navigateBack()
				} else {
					uni.showToast({
						title: result.message || '注册失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('注册错误:', error)
				uni.showToast({
					title: '注册失败，请重试',
					icon: 'none'
				})
			}
		},
		goToLogin() {
			uni.navigateBack()
		},
		showTerms() {
			uni.showModal({
				title: '用户协议',
				content: '欢迎使用小何备忘录！\n\n1. 本应用为本地存储应用，数据仅保存在您的设备上。\n2. 请妥善保管您的账户信息。\n3. 建议定期备份重要数据。\n4. 致力于保护您的隐私安全。',
				showCancel: false,
				confirmText: '我知道了'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
	width: 200px;
	height: 200px;
	top: -100px;
	right: -100px;
}

.circle-2 {
	width: 150px;
	height: 150px;
	bottom: 100px;
	left: -75px;
}

.circle-3 {
	width: 100px;
	height: 100px;
	top: 30%;
	left: -50px;
}

.register-form {
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

.form-header {
	text-align: center;
	margin-bottom: 50px;
}

.title {
	display: block;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}

.subtitle {
	display: block;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
}

.form-content {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 40px 30px;
}

.input-group {
	margin-bottom: 20px;
}

.input-wrapper {
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 12px;
	padding: 0 15px;
	border: 1px solid #e9ecef;
	transition: border-color 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #667eea;
}

.input-field {
	flex: 1;
	padding: 15px 10px;
	font-size: 16px;
	border: none;
	background: transparent;
	outline: none;
}

.password-toggle {
	padding: 5px;
	cursor: pointer;
}

.agreement {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.agreement-text {
	margin-left: 10px;
	font-size: 14px;
	color: #666;
}

.agreement-link {
	color: #667eea;
	font-size: 14px;
	text-decoration: underline;
}

.register-btn {
	width: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 15px;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}

.form-footer {
	text-align: center;
}

.footer-text {
	font-size: 14px;
	color: #666;
}

.footer-link {
	color: #667eea;
	font-size: 14px;
	font-weight: 500;
	margin-left: 5px;
}
</style>

